<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <style>
    .box {
      width: 150px;
      height: 150px;
      background-color:aquamarine;
      position: relative;
      left: 0;
    }
    img {
      width: 150px;
      height: 150px;
    }
  </style>
</head>
<body>
  <div id="image"></div>
  <div class="box"></div>
  <script>
    function loadImage(src, resolve, reject) {
      const image = new Image();
      image.src = src;
      image.onload = ()=>{
        resolve(image)
      };
      image.onerror = reject;
    }
    loadImage("https://oss.sceneconsole.cn/user/fictitious/1617954071139.jpg", 
    (image) => {
      console.log("图片加载完成")
      document.getElementById('image').appendChild(image)
    }, () => {
      console.log("加载失败")
    })
    console.log("执行")

    function interval(callback, delay = 800) {
      // 返回值是定时器id
      let id = setInterval(() => callback(id), delay)
    }
    // interval(function(id) {
    //   console.log(id);
    // }, 1000)
    // fira Code

    interval((timeId) => {
      const oBox = document.getElementsByClassName('box')[0]
      let left = parseInt(window.getComputedStyle(oBox).left);
      oBox.style.left = left + 10 + 'px';
      if (left >= 200) {
        clearInterval(timeId)
        interval((timeId) => {
          let width = parseInt(window.getComputedStyle(oBox).width)
          oBox.style.width = width - 10 + 'px';
          if(width <= 20) {
            clearInterval(timeId)
          }
        }, 100)
      }
    })

  </script>
</body>
</html>